<template>
  <div class="project-list" style="margin: 15px">
    <el-card style="width: 100%">
      <!-- 标题头 -->
      <div slot="header" style="padding-bottom: 10px">
        <span style="display: flex; align-items: center; font-size: 18px">
          <img
            src="@/assets/img/jlpz.png"
            style="height: 20px; width: 20px; margin-right: 5px"
          />
          奖励详情</span
        >
      </div>
      <!-- 项目内容 -->
      <div>
        <!-- 查询表单 -->
        <div style="margin: 20px 0px 0px -10px; padding-bottom: 15px">
          <el-form :inline="true" label-position="right" label-width="110px">
            <el-form-item label="奖励模板名称">
              <el-input
                v-model="formData.field101"
                placeholder="请输入模版名称"
                :maxlength="30"
                clearable
                style="margin-right: 30px; width: 200px"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="奖励依据">
              <el-input
                v-model="formData.field102"
                placeholder="请输入奖励依据"
                :maxlength="30"
                clearable
                style="margin-right: 30px; width: 200px"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="奖励模式">
              <el-select
                v-model="formData.field102"
                filterable
                clearable
                placeholder="请选择奖励模"
                style="margin-right: 30px; width: 200px"
              >
                <el-option
                  v-for="(item, index) in field111Options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="用户昵称">
              <el-input
                v-model="formData.field103"
                placeholder="请输入用户昵称"
                :maxlength="30"
                clearable
                style="margin-right: 30px; width: 200px"
              ></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="用户账号">
              <el-input
                v-model="formData.field104"
                placeholder="请输入用户账号"
                :maxlength="30"
                clearable
                style="margin-right: 30px; width: 200px"
              ></el-input>
            </el-form-item> -->

            <el-form-item label="" style="margin-left: 110px">
              <el-button
                icon="el-icon-refresh"
                style="background: #eeeeee; color: #6396f4; font-weight: bold"
                @click="resetForm"
                >重置
              </el-button>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="getList(1)"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
          <!-- <div style="display: flex; justify-content: center">
          <el-button
            icon="el-icon-refresh"
            style="background: #eeeeee; color: #6396f4; font-weight: bold"
            @click="resetForm"
            >重置
          </el-button>
          <el-button type="primary" icon="el-icon-search" @click="submitForm"
            >搜索</el-button
          >
        </div> -->
        </div>
        <!-- <div class="xhxBox"></div> -->
        <el-divider v-if="userName != '用户'"></el-divider>
        <!-- 项目列表 -->
        <div class="content" style="height: 75%">
          <!-- 按钮 -->
          <!-- <div style="display: flex; justify-content: space-between">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="editBotton"
              v-if="userName != '用户'"
              >新增项目</el-button
            >
          </div> -->
          <!-- 卡片式列表 -->
          <el-empty
            :image-size="200"
            description="暂无数据"
            v-show="roleList.length <= 0"
          ></el-empty>
          <div
            v-show="roleList.length > 0"
            style="
              margin-top: 10px;
              padding-bottom: 20px;

              display: flex;
              flex-direction: column;
              justify-content: space-between;
            "
          >
            <!-- 用户的项目列表 -->
            <div style="display: flex; flex-wrap: wrap; margin-left: -26px">
              <el-card
                shadow="always"
                :style="{
                  height: 'auto',
                  width: 380 + 'px',
                  'margin-bottom': 15 + 'px',
                  'border-radius': 10 + 'px',
                  background: '#FFFFFF',
                  'margin-left': 26 + 'px',
                }"
                v-for="(item, index) in roleList"
                :key="index"
              >
                <!-- 状态栏 -->

                <!-- 项目内容 -->
                <div class="cardTopBox" @click="getDetailsButton(item)">
                  <div style="width: 100%; font-size: 18px; font-weight: 600">
                    <!-- {{ item.rewardTemplateName }} -->
                    {{ item.reward_template_name }}
                  </div>
                  <!-- 基础信息 -->
                  <div class="cardTopBoxMiniLeft">
                    <!-- 名称+类型 -->
                    <div style="width: 50%">
                      奖励依据：
                      <!-- {{ item.keyName }} -->
                      {{ item.key_name }}
                    </div>
                    <div
                      style="
                        width: 50%;
                        display: flex;
                        justify-content: flex-end;
                      "
                    >
                      <span v-show="item.pattern == 'TEAM'">团队</span>
                      <span v-show="item.pattern != 'TEAM'">个人</span>
                    </div>
                  </div>
                </div>
                <!-- 操作按钮 -->
                <div class="messageBox" @click="getDetailsButton(item)">
                  <div class="messageBoxtop">
                    <span
                      >目标数量：
                      <!-- {{ item.targetValue }} -->
                      {{ item.target_value || 0 }}
                    </span>
                    <span
                      >当前数量：
                      <!-- {{ item.currentQuantity }} -->
                      {{ item.current_quantity || 0 }}
                    </span>
                  </div>
                  <div class="messageBoxtop">
                    <span
                      >奖励次数：
                      <!-- {{ item.number }} -->
                      {{ item.number || 0 }}
                    </span>
                  </div>
                  <div class="messageBoxtop">
                    <span>奖励时间：</span>
                  </div>
                  <div class="messageBoxtop">
                    <span>
                      <!-- {{item.rewardStartTime + "——" + item.rewardEndTime}} -->
                      {{ item.reward_start_time + "——" + item.reward_end_time }}
                    </span>
                  </div>
                  <div class="messageBoxBottom">
                    <el-progress :percentage="item.bfb"></el-progress>
                  </div>
                </div>
              </el-card>
            </div>
            <!-- 分页器 -->
            <pagination
              style="margin: 0px 0px 100px 0px"
              :total="total"
              :page.sync="formData.pageNum"
              :limit.sync="formData.pageSize"
              @pagination="getList"
            />
          </div>
        </div>
      </div>
    </el-card>
    <!-- 公告弹窗 -->
    <Dialog
      ref="mychild"
      @AddAnnouncement="AddAnnouncement"
      :uelLocation="uelLocation"
    />
    <!-- 删除 -->
    <el-dialog title="" :visible.sync="deleteDialogVisible" width="30%" center>
      <span>需要注意的是内容是默认不居中的</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--  弹窗-->
    <!-- <el-dialog title="奖励信息记录" :visible.sync="getDetails">
      <el-table :data="recordDataList" height="450">
      
        <el-table-column label="奖励时间" prop="createTime" align="center" />
        <el-table-column label="扣除数量" prop="value" align="center" />
     
      </el-table>
      <pagination
        style="margin: 0px 0px 50px 0px"
        :total="record.total"
        :page.sync="record.pageNum"
        :limit.sync="record.pageSize"
        @pagination="recordList"
      />
    </el-dialog> -->
    <!-- 奖励规则弹窗 -->
    <el-dialog title="奖励规则" :visible.sync="getDetails">
      <div style="height: 400px">
        <quill-editor
          ref="text"
          v-model="contentText"
          disabled
          class="myQuillEditor"
          :options="editorOption"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import {
  listAPI,
  editindex,
  moreAPI,
  proUserList,
  Enableforbidden,
  selectRewardInfos,
  selectRewardInfoRecords,
  selectRewardTemplates,
  selectRewardTemplatesByUser,
  RewardRules,
} from "@/api/projectManagement/index.js";
import { getIdentityAndTopId } from "@/api/login.js";
import Dialog from "@/views/components/Dialog.vue";
export default {
  data() {
    return {
      contentText: "",
      editorOption: {
        modules: {
          syntax: {
            highlight: (text) => hljs.highlightAuto(text).value,
          },
          toolbar: [
            [], // toggled buttons
            [],

            [], // custom button values
            [],
            [], // superscript/subscript
            [], // outdent/indent
            [], // text direction

            [], // custom dropdown
            [],

            [], // dropdown with defaults from theme
            [],
            [],
            [], //去除video即可
          ],
        },
        placeholder: "...",
      },
      field111Options: [
        {
          label: "全部",
          value: undefined,
        },
        {
          label: "团队",
          value: "TEAM",
        },
        {
          label: "个人",
          value: "PERSONAL",
        },
      ],
      //查看详情弹窗
      getDetails: false,
      recordDataList: [],
      record: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
      },
      row: {
        id: "",
        userId: "",
      },
      deleteDialogVisible: false, //删除弹窗
      uelLocation: "",

      // 全的项目列表
      formData: {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field105: undefined,
        field104: undefined,
        field106: undefined,
        pageNum: 1,
        pageSize: 10,
      },

      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [
        {
          rewardTemplateName: "1",
          keyName: "22",
          pattern: "TEAM",
          targetValue: "2",
          currentQuantity: "2",
          number: "2",
          rewardStartTime: "2",
          bfb: "2",
        },
      ],

      userId: "",
      //租户还是用户
      userName: "",
    };
  },
  async created() {},
  async mounted() {
    this.userId = sessionStorage.getItem("userID") - 0;
    //获取是租户还是用户还是平台
    const { data } = await getIdentityAndTopId();
    //console.log(data, "用户信息平台还是租户");
    this.userName = data.identity;
    //公告弹窗
    if (data.identity == "用户") {
      this.AddAnnouncement();
    }
    this.getList();
  },
  methods: {
    async getList(row) {
      let param = {
        name: this.formData.field101, //奖励模板名称
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
        pattern: this.formData.field102, //奖励模式 个人还是团队
      };
      const listData = await selectRewardTemplatesByUser(param);
      // //console.log(listData, "66777000++++++++++++");
      if (listData.code == 200) {
        if (listData.data == null) {
          this.roleList = [];
        } else {
          if (listData.data.list.length > 0) {
            let num = null;
            let num2 = null;
            listData.data.list.map((item) => {
              if (item.total_quantity != null || item.target_value != null) {
                num = item.total_quantity / item.target_value; //四舍五入取整
                num2 = num * 100; //四舍五入取整
                item.bfb = num2.toFixed(2) - 0; //四舍五入取整
              } else {
                item.bfb = 0;
              }
            });
            this.roleList = listData.data.list;
            this.total = listData.data.total;
          } else {
            this.roleList = [];
          }
        }
      } else {
        this.$message.error(listData.msg);
      }
      // // 查询时间
      // let param2 = {
      //   pageNum: 1,
      //   pageSize: 1000,
      // };
      // const dataTime = await selectRewardTemplates(param2);
      // if (dataTime.code == 200) {
      //    param = {
      //     rewardTemplateName: this.formData.field101, //奖励模板名称
      //     keyName: this.formData.field102, //奖励依据
      //     nickName: this.formData.field103, //用户昵称
      //     userName: this.formData.field104, //用户账号
      //     pageNum: this.formData.pageNum,
      //     pageSize: this.formData.pageSize,
      //     // projectId: 0,
      //     userId: this.userId - 0,
      //   };
      //   const data = await selectRewardInfos(param);

      //   if (data.code == 200) {
      //     if (data.data.list.length > 0) {
      //       let num = null;
      //       let num2 = null;
      //       // //console.log(data.data, "111");
      //       dataTime.data.list.map((item) => {
      //         data.data.list.forEach((item2) => {
      //           num = item2.totalQuantity / item2.targetValue; //四舍五入取整
      //           num2 = num * 100; //四舍五入取整
      //           item2.bfb = num2.toFixed(2) - 0; //四舍五入取整
      //           if (item2.rewardTemplateId == item.id) {
      //             item2.rewardStartTime = item.rewardStartTime;
      //             item2.rewardEndTime = item.rewardEndTime;
      //           }
      //         });
      //       });

      //       this.$nextTick(() => {
      //         this.roleList = data.data.list;
      //         this.total = data.data.total;
      //         // //console.log(this.roleList, "66777000");
      //         // //console.log(this.roleList[0].rewardStartTime, "66777000");
      //       });
      //     } else {
      //       this.roleList = [];
      //     }
      //   } else {
      //     this.$message.error(data.msg);
      //   }
      // } else {
      //   this.$message.error(data.msg);
      // }
      if (row) {
        this.$message({
          message: "搜索中...",
          type: "success",
        });
      }
    },
    //查看详情
    async getDetailsButton(row) {
      const data = await RewardRules(row.reward_template_id);
      //console.log(data, "999");
      if (data.code == 200) {
        this.contentText = data.data.ruleExplain;
      } else {
        this.$message.error(data.msg);
      }
      // let param = {
      // projectId: this.$route.query.projectId - 0, //项目ID
      //   rewardInfoId: row.id, //奖励信息ID
      //   rewardTemplateId: this.$route.query.id - 0, //奖励模板ID
      //   pageNum: this.record.pageNum,
      //   pageSize: this.record.pageSize,
      //   userId: row.userId,
      // };
      // const data = await selectRewardInfoRecords(param);
      // //console.log(data, "信息记录");
      // if (data.code == 200) {
      //   if (data.data.list.length > 0) {
      //     this.recordDataList = data.data.list;
      //     this.record.total = data.data.total;
      //   } else {
      //     this.recordDataList = [];
      //   }
      // } else {
      //   this.$message.error(data.msg);
      // }

      // this.row.id = row.id;
      // this.row.userId = row.userId;
      this.getDetails = true;
    },
    async recordList() {
      let param = {
        projectId: this.$route.query.projectId - 0, //项目ID
        rewardInfoId: this.row.id, //奖励信息ID
        rewardTemplateId: this.$route.query.id - 0, //奖励模板ID
        pageNum: this.record.pageNum,
        pageSize: this.record.pageSize,
        userId: this.row.userId,
      };
      const data = await selectRewardInfoRecords(param);
      //console.log(data, "信息记录");
      if (data.code == 200) {
        if (data.data.list.length > 0) {
          this.recordDataList = data.data.list;
          this.record.total = data.data.total;
        } else {
          this.recordDataList = [];
        }
      } else {
        this.$message.error(data.msg);
      }
    },
    //重置
    resetForm() {
      this.formData = {
        field101: undefined,
        field102: undefined,
        field103: undefined,
        field105: undefined,
        field104: undefined,
        field106: undefined,
        pageNum: 1,
        pageSize: 10,
      };
      this.getList(1);
    },
    //奖励模板
    awardTemplate(row) {
      let config = row.cTime.filter((item) => item.configKey == "vipSummary");
      //console.log(config, "9999");

      this.$router.push({
        path: "ConfigurationAward",
        query: {
          proId: row.proId,
          judgeParam: row.typeId, //脱敏1汇总2
          configTypeId: config[0].id, //会员汇总的id
        },
      });
    },

    //公告弹窗
    AddAnnouncement() {
      //传递子组件当前的路由；然后调用子组件的事件函数
      this.uelLocation = window.location.pathname.slice(1);
      this.$refs.mychild.gitData();
    },

    //删除
    async delData(row) {
      // this.deleteDialogVisible=true;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let param = {
            delState: 1,
            proId: row.proId,
          };
          const data = await editindex(param);
          if (data.code == 200) {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功！",
            });
          } else {
            this.$message.error("操作失败！");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      //

      //
    },

    // 数据按钮
    dataBotton(row) {
      //console.log(row, "数据");
      // if (this.userName == "租户") {
      //   //console.log(row, "数据");
      //   this.$router.push({
      //     path: "tenantData",
      //     query: {
      //       proId: row.proId,
      //     },
      //   });
      // } else if (this.userName == "用户") {
      //   this.$router.push("userData");
      // }

      this.$router.push({
        path: "tenantData",
        query: {
          proId: row.proId,
          judgeParam: row.typeId,
        },
      });
    },

    handleAdd() {
      this.$router.push("addItem1");
    },
  },
  components: { Dialog, quillEditor },
};
</script>
<style scoped lang="scss">
//弹窗在屏幕中间
::v-deep .el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0vh !important;
}
.myQuillEditor {
  height: 350px;
}
.cardTopBox {
  // border: 1px red solid;
  border-bottom: 1px #eee solid;
  height: 90px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  cursor: pointer;
  //    border: 1px red solid;
  //   justify-content: space-between;
  .cardTopBoxMiniLeft {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    // border: 1px red solid;
  }
}
//下面
.messageBox {
  //   font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  //   padding: 10px 0px 10px 0px;
  // background: red;
  cursor: pointer;
  margin-top: 10px;
  .messageBoxtop {
    width: 100%;
    // border: 1px red solid;
    display: flex;
    justify-content: space-between;
  }

  .messageBoxBottom {
    width: 100%;
    // border: 1px red solid;
    // justify-content: space-between;
    height: 20px;
    margin-top: 10px;

    .progBox {
      width: 85%;
      border: 1px red solid;
    }
    .textBox {
      width: 20%;
      border: 1px red solid;
    }
    span {
      //  border: 1px red solid;
      height: auto;
      width: 99%;
    }
  }
}
::v-deep .el-progress {
  // border: 1px red solid;
  display: flex;
  align-items: center;
}
.project-button div:not(:last-child) {
  margin-right: 10px;
  margin-top: 20px;
}
/* 用户状态下的卡片 */
.EnterBox {
  color: #ffffff;
  font-size: 12px;
  text-align: right;
  height: 90%;
  width: 60px;
  font-weight: 400;
  border-radius: 10px;
  background: rgb(24, 144, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardBox {
  height: 300px;
  width: 380px;
  margin-bottom: 15px;
  border-radius: 10px;
  /* background: item.state == 1 ? '#FFFFFF' : '#f5f5f5', */
  background: #ffffff;
  margin-left: 26px;
}
.cardBox2 {
  height: 300px;
  width: 380px;
  margin-bottom: 15px;
  border-radius: 10px;
  /* background: item.state == 1 ? '#FFFFFF' : '#f5f5f5', */
  background: #f5f5f5;
  margin-left: 26px;
}

.xhxBox {
  border-top: 1px #eee solid;
  height: 5px;
  border: 1px red solid;
}
</style>
<style>
.el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
  overflow: scroll !important;
}
.project-list .el-date-editor .el-range-separator {
  width: 15%;
}

.project-list .el-form-item--medium .el-form-item__content {
  width: 200px;
}

.project-list .status-switch {
  line-height: 1;
  font-size: 14px;
  display: inline-block;
  font-weight: 500;
  cursor: pointer;
  margin-left: 5px;
}

.project-list .project-button img {
  margin-right: 3px;
}

.project-list .project-button img:last-child {
  margin-left: 3px;
}

.project-list {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-top: 20px;
}

.project-list .el-dropdown-menu__item {
  font-size: 14px;
}

.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #f5f5f5 !important;
  color: #5c8af6 !important;
}

.project-list .el-divider--horizontal {
  background: #f0f0f0;
}

.project-list .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
  border-bottom: 1px #eee solid;
}

/*.project-list .el-card__body {*/
/*  padding: 0;*/
/*}*/
</style>
